<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="参数配置"
    width="50%"
    @close="onClose"
  >
    <a-form>
      <a-form-item label="商户号：">
        <a-tag color="blue">{{ vdata.detailData.mchNo }}</a-tag>
      </a-form-item>

      <a-form-item label="支付参数：">
        <a-textarea
          v-model:value="vdata.detailData.succResParameter"
          disabled="disabled"
          style="height: 100px;color: black"
        />
      </a-form-item>

      <a-divider orientation="left"><a-tag color="black">应用配置</a-tag></a-divider>

      <a-form-item label="参数配置到应用：">
        <a-select v-model:value="vdata.configAppId" style="width:320px" class="form-item-content" placeholder="选择应用">
          <a-select-option key="">请选择商户应用</a-select-option>
          <a-select-option v-for="(item) in vdata.mchAppList" :key="item.appId">{{ item.appName }} [{{ item.appId }}]</a-select-option>
        </a-select>
        <a-button size="small" style="margin-left: 20px;" type="primary" :disabled="!vdata.configAppId" @click="configMchAppIdFunc"><save-outlined />配置【支付参数】到应用</a-button>
        <a-button size="small" style="margin-left: 20px;" type="danger" :disabled="!vdata.configAppId" @click="configMchRateAppIdFunc"><save-outlined />配置【费率】到应用</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MCH_APPLYMENT_LIST, API_URL_MCH_APP, req, $applymentAppConfig, $saveRateConfig } from '@/api/manage'
import {reactive, getCurrentInstance} from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties


const vdata : any = reactive({
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
  mchAppList: [], // 商户app列表
  configAppId: ''
})

function show (recordId) { // 弹层打开事件

   //重置配置
  vdata.configAppId = ''
  vdata.mchAppList = []

  vdata.recordId = recordId

  req.getById(API_URL_MCH_APPLYMENT_LIST, recordId).then( (res) => {
    vdata.detailData = res
    req.list(API_URL_MCH_APP, { pageSize: -1, mchNo: vdata.detailData.mchNo }).then(res2 => {
      vdata.mchAppList = res2.records
      if(vdata.mchAppList.length > 0){
        vdata.configAppId = vdata.mchAppList[0].appId
      }
    })

    vdata.visible = true
  })

}

// 配置本系统的app应用配置项
function configMchAppIdFunc(){

  if(!vdata.configAppId){
    $infoBox.message.error('请选择商户应用')
    return Promise.reject()
  }

  return $applymentAppConfig(vdata.recordId, vdata.configAppId).then((res) => {
    $infoBox.message.success('商户应用配置完成， 如商户支付方式未配置，请进行方式配置。 ')
    return Promise.resolve()
  })

}

function onClose () {
  vdata.visible = false
}

// 配置费率到应用
function configMchRateAppIdFunc(){

  if(!vdata.configAppId){
    $infoBox.message.error('请选择商户应用')
    return Promise.reject()
  }

  // 请求对象
  let configMode = 'mgrMch' // 运营平台配置商户费率
  let reqObject = {infoId: vdata.configAppId, ifCode: vdata.detailData.ifCode, configMode: configMode, MCHRATE: JSON.parse(vdata.detailData.applyDetailInfo).paywayFeeList}
  return $saveRateConfig(reqObject).then((res) => {
    $infoBox.message.success('费率保存成功')
  })

}

defineExpose({ show })
</script>
<style scoped>

.form-item-content{
  width: 70%
}

</style>